<template>
  <el-dialog
    v-model="dialogVisible"
    :title="title"
    width="600px"
    :before-close="handleClose"
    :close-on-click-modal="false">
    <el-form
      ref="azFormRef"
      :model="form.data"
      :rules="form.rules"
      label-width="auto">
      <el-form-item label="地区ID：" prop="zone_id">
        <el-input class="w-280" v-model="form.data.zone_id" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.zone_id }}</span>
      </el-form-item>
      <el-form-item label="地区名称：" prop="zone_name">
        <el-input class="w-280" v-model="form.data.zone_name" v-if="type === 'add'"></el-input>  
        <span v-else>{{ curRow.zone_name }}</span>
      </el-form-item>
      <el-form-item label="地区英文名称：" prop="zone_name_en">
        <el-input class="w-280" v-model="form.data.zone_name_en" v-if="type === 'add'"></el-input>  
        <span v-else>{{ curRow.zone_name_en }}</span>
      </el-form-item>
      <el-form-item label="地域ID：" prop="region_id">
        <el-input class="w-280" v-model="form.data.region_id" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.region_id }}</span>
      </el-form-item>
      <el-form-item label="地域名称：" prop="region_name">
        <el-input class="w-280" v-model="form.data.region_name" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.region_name }}</span>
      </el-form-item>
      <el-form-item label="地域英文名称：" prop="region_name_en">
        <el-input class="w-280" v-model="form.data. region_name_en" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow. region_name_en }}</span>
      </el-form-item>
      <el-form-item label="可用区ID：" prop="available_zone_id">
        <el-input class="w-280" v-model="form.data.available_zone_id" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.available_zone_id }}</span>
      </el-form-item>
      <el-form-item label="可用区名称：" prop="available_zone_name">
        <el-input class="w-280" v-model="form.data.available_zone_name" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.available_zone_name }}</span>
      </el-form-item>
      <el-form-item label="可用区英文名称：" prop="available_zone_name_en">
        <el-input class="w-280" v-model="form.data.available_zone_name_en" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.available_zone_name_en }}</span>
      </el-form-item>
      <el-form-item label="镜像仓库地址：" prop="repo_domain">
        <el-input class="w-280" v-model="form.data.repo_domain"></el-input>
      </el-form-item>
      <el-form-item label="rpc地址：" prop="rpc_host">
        <el-input class="w-280" v-model="form.data.rpc_host" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.rpc_host }}</span>
      </el-form-item>
      <el-form-item label="远程连接地址：" prop="ws_host">
        <el-input class="w-280" v-model="form.data.ws_host" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.ws_host }}</span>
      </el-form-item>
      <el-form-item label="vk镜像版本：" prop="vk_image">
        <el-input class="w-280" v-model="form.data.vk_image"></el-input>
      </el-form-item>
      <el-form-item prop="complexes">
        <template #label>
          其他信息：
          <el-tooltip
            effect="light"
            placement="top">
            <template #default>
              <i class="el-icon-question"></i>
            </template>
            <template #content>
              填写可用区的dns信息，格式：{"dns": ["8.8.8.8"]}
            </template>
          </el-tooltip>
        </template>
        <el-input class="w-280" v-model="form.data.complexes" type="textarea" v-if="type === 'add'"></el-input>
        <span v-else>{{ curRow.complexes }}</span>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script>
import { computed, reactive, ref, watch } from 'vue';
import azService from '@/service/eci/az.js'
import { ElMessage } from 'element-plus'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    type: {
      type: String,
      default: 'add'
    },
    curRow: {
      type: Object,
      default: () => {}
    }
  },
  emits: ['update:visible', 'searchList'],
  setup(props, {emit}) {
    const dialogVisible = computed({
      get() {
        return props.visible
      },
      set(val) {
        azFormRef.value.resetFields()
        emit('update:visible', val)
      }
    })
    watch(() => [props.curRow, props.type], ([nVal1,nVal2]) => {
      if(nVal1 && nVal2 === 'edit') {
        form.data = nVal1
      } else if(nVal2 === 'add') {
        form.data = {
          zone_id: '',
          zone_name: '',
          zone_name_en: '',
          region_id: '',
          region_name: '',
          region_name_en: '',
          available_zone_id: '',
          available_zone_name: '',
          available_zone_name_en: '',
          repo_domain: '',
          rpc_host: '',
          ws_host: '',
          vk_image: '',
          complexes: ''
        }
      }
    }, {immediate: true, deep: true})
    const azFormRef = ref(null)
    const form = reactive({
      data: {
        zone_id: '',
        zone_name: '',
        zone_name_en: '',
        region_id: '',
        region_name: '',
        region_name_en: '',
        available_zone_id: '',
        available_zone_name: '',
        available_zone_name_en: '',
        repo_domain: '',
        rpc_host: '',
        ws_host: '',
        vk_image: '',
        complexes: ''
      },
      rules: {
        zone_id: [
          { required: true, message: '请输入地区ID', trigger: ['blur', 'change'] }
        ],
        zone_name: [
          { required: true, message: '请输入地区名称', trigger: ['blur', 'change'] }
        ],
        zone_name_en: [
          { required: true, message: '请输入地区英文名称', trigger: ['blur', 'change'] }
        ],
        region_id: [
          { required: true, message: '请输入地域ID', trigger: ['blur', 'change'] }
        ],
        region_name: [
          { required: true, message: '请输入地域名称', trigger: ['blur', 'change'] }
        ],
        region_name_en: [
          { required: true, message: '请输入地域英文名称', trigger: ['blur', 'change'] }
        ],
        available_zone_id: [
          { required: true, message: '请输入可用区ID', trigger: ['blur', 'change'] }
        ],
        available_zone_name: [
          { required: true, message: '请输入可用区名称', trigger: ['blur', 'change'] }
        ],
        available_zone_name_en: [
          { required: true, message: '请输入可用区英文名称', trigger: ['blur', 'change'] }
        ],
        repo_domain: [
          { required: true, message: '请输入镜像仓库地址', trigger: ['blur', 'change'] }
        ],
        rpc_host: [
          { required: true, message: '请输入rpc地址', trigger: ['blur', 'change'] }
        ],
        ws_host: [
          { required: true, message: '请输入远程连接地址', trigger: ['blur', 'change'] }
        ],  
        vk_image: [
          { required: true, message: '请输入vk镜像版本', trigger: ['blur', 'change'] }
        ],
        complexes: [
          { required: true, message: '请输入complexes', trigger: ['blur', 'change'] }
        ]
      }
    })
    const handleClose = () => {
      dialogVisible.value = false
    }
    const handleConfirm = () => {
      azFormRef.value.validate(valid => {
        if(valid) {
          let params = {
            req_data: {
              ...form.data
            },
            action: props.type === 'add' ? 'new' : 'update'
          }
          azService.saveAz(params).then(res => {
            if(res.code === 'Success') {
              ElMessage.success('保存成功')
              emit('searchList')
              handleClose()
            }
          })
        }
      })
    }
    return {
      dialogVisible,
      handleClose,
      handleConfirm,
      form,
      azFormRef
    }
  }
}

</script>
<style scoped>

</style>